@extends('layouts.app')
@include('authority.sidebar')
@section('content')
<style>
.col-xs-xxx{
    width: 20%;
    float: left;
}
</style>
    <div class="box box-primary" >
        <div class="box-body">
            <a class="btn btn-success" href="{{ route('admin.authority.role') }}">返回</a>
        </div>
        <div class="box-body">
            <table class="table table-hover" style="max-width: 1400px;">
                @foreach(config('authority.backstage') as $v)
                <tr>
                    <td class="form-group child" width="10%"><input class="ability first" id="{{$v['ability']}}" type="checkbox"
                        @if (in_array($v['ability'], $data)) 
                            checked
                        @endif 
                    /><label for="">{{$v['name']}}</label></td>
                    <td width="10%">
                        <button class="btn btn-info btn-sm"   onclick="checkAll('{{$v['ability']}}')">全选</button>
                        <button class="btn btn-danger btn-sm" onclick="uncheckAll('{{$v['ability']}}')">全否</button>
                    </td>
                    <td class="form-group child" width="70%" id="{{$v['ability']}}_child">
                        <!-- <div class="col-xs-10"> -->
                        @if (isset($v['child']))
                            @foreach($v['child'] as $vv)
                                <div @if (isset($vv['ability']) && $vv['ability'] == 'input2br') class="col-xs-12" @else class="col-xs-xxx" @endif>
                                    <input @if (isset($vv['ability']) && $vv['ability'] == 'input2br') class="hide" @else class="ability form-group" @endif  id="{{$vv['ability']}}" 
                                    @if (in_array($vv['ability'], $data)) 
                                        checked
                                    @endif 
                                    type="checkbox">
                                    <label for="" style="margin-right:20px;" @if (isset($vv['ability']) && $vv['ability'] == 'input2br') class="hide" @endif>{{$vv['name']}}</label>
                                </div>
                            @endforeach
                        @endif
                        <!-- </div> -->
                    </td>
                </tr>
                @endforeach
            </table>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function checkAll(ability) {
            $('#'+ability).prop('checked', true);
            var data = [ability];
            var url = "{{ route('admin.authority.ability.allow', ['role' => $role]) }}";
            auth = $('#'+ability+'_child').find('.ability')
            auth.each(function (key, item) {
                data.push($(item).attr('id'));
            });
            auth.prop('checked', true);

            setAuth(url, data)
        }

        function uncheckAll(ability) {
            $('#'+ability).prop('checked', false);
            var data = [ability];
            var url = "{{ route('admin.authority.ability.disallow', ['role' => $role]) }}";
            auth = $('#'+ability+'_child').find('.ability')
            auth.each(function (key, item) {
                data.push($(item).attr('id'));
            });
            auth.prop('checked', false);

            setAuth(url, data)
        }

        $(".ability").on("click", function () {
            var ability = $(this).attr('id');
            var data = [ability];

            if ($(this).is(':checked')) {
                var url = "{{ route('admin.authority.ability.allow', ['role' => $role]) }}";
                var parent = $(this).parents('.child').prevAll().find('.ability');
                parent.each(function (key, item) {
                    data.push($(item).attr('id'));
                });
                parent.prop('checked', true);
            } else {
                var url = "{{ route('admin.authority.ability.disallow', ['role' => $role]) }}";
                // var children = $(this).parent().next().find('.ability');
                // children.each(function (key, item) {
                //     data.push($(item).attr('id'));
                // });
                // children.prop('checked', false);
            }
            setAuth(url, data)
        });

        $('.first').on('click', function(){
            if ($(this).is(':checked')) {
                checkAll($(this).attr('id'))
            }else{
                uncheckAll($(this).attr('id'))
            }
        })

        function setAuth(url, data){
            $.ajax({
                url: url,
                type: "POST",
                dataType:'json',
                data: {
                    ability: data,
                },
                success: function (re) {
                    if (!re) {
                        alert("权限修改失败");
                    }
                }
            });
        }

        // $('.content-wrapper').attr('style', 'max-width:2000px')
    </script>
@endpush